<template>
    <div class="control">
        <!-- 搜索 -->
        <el-form ref="searchForm" :model="searchMap">
            <Breadcrumb :title="pageTitle" />
            <div class="search_wrapper flex-space-between el-form--inline" style="margin-top: 20px;">
                <div class="search flex">
                    <el-form-item prop="deviceName" size="small">
                        <span class="label-tip" style="width: 160px;">单位名称：</span>
                        <el-input v-model="searchMap.deviceName" placeholder="请选择单位"></el-input>
                    </el-form-item>
                </div>
                <div class="edit">
                    <el-form-item class="flex">
                        <el-button @click="handleSearch()" class="btn_primary el-icon-search">查询</el-button>
                        <el-button @click="handleReset()" class="btn_cancel el-icon-refresh-left">重置</el-button>
                        <el-button @click="handleAdd()" class="btn_primary el-icon-plus">新增</el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <!-- 表格 -->
        <el-table :data="dataList" v-loading="loading" stripe class="per_table" style="width: 100%" height="400">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="content" label="单位名称"></el-table-column>
            <el-table-column prop="tree" label="隐患整改名称" align="center"></el-table-column>
            <el-table-column prop="unit" label="问题详情" align="center"></el-table-column>
            <el-table-column prop="unit" label="发现问题的人" align="center"></el-table-column>
            <el-table-column prop="unit" label="是否有重大安全隐患" align="center"></el-table-column>
            <el-table-column prop="unit" label="重大全隐患级别" align="center"></el-table-column>
            <el-table-column prop="unit" label="整改完成" align="center"></el-table-column>
            <el-table-column prop="unit" label="整改完成了吗" align="center"></el-table-column>
            <el-table-column prop="unit" label="完成时间" align="center"></el-table-column>
            <el-table-column label="操作" width="280">
                <template slot-scope="scope">
                    <div>
                        <span type="text" class="marginl-10 el-icon-edit" style="color:dodgerblue;" size="small"
                            @click="handleEdit(scope.row)">编辑</span>
                        <span type="text" class="marginl-10 el-icon-zoom-in" style="color:dodgerblue;" size="small"
                            @click="handleSelect(scope.row)">详情</span>
                        <span type="text" class="marginl-10 el-icon-delete" style="color:red;" size="small"
                            @click="handleDelete(scope.row)">删除</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
            @change="getList"></Pagination>


        <!-- 弹窗 详情 -->
        <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body
            :before-close="() => { dialogVisible = false }" :close-on-click-modal="false">
            <div class="content">
                <custom-form ref="FireFightingForm" formRef="add" :formModel="formModel" :formItemConfig="formItemConfig"
                    :formRules="formRules" label-width="80px" label-position="left" />

                <div style="display: flex;margin-bottom: 20px;">
                    <div style="width: 140px;padding-right: 20px;text-align: right;color: #fff;">是否有重大安全隐患</div>
                    <div style="flex: 1;">
                        <el-switch v-model="switchData">
                        </el-switch>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 140px;text-align: right;padding-right: 15px; color: #fff;">相关附件</div>
                    <div style="flex: 1;">
                        <el-table :data="fileList" v-loading="loading" stripe class="per_table" style="width: 100%">
                            <el-table-column type="index" width="50">
                            </el-table-column>
                            <el-table-column prop="label" label="附件名称"></el-table-column>
                            <el-table-column label="操作" width="230">
                                <template slot-scope="scope">
                                    <div>
                                        <span type="text" class="el-icon-check" style="color:dodgerblue;" size="small"
                                            @click="handleDialogGet(scope.row)">有效</span>
                                        <span type="text" class="marginl-10 el-icon-download" style="color:dodgerblue;"
                                            size="small" @click="handleDialogDownload(scope.row)">下载</span>
                                        <span type="text" class="marginl-10 el-icon-delete" style="color:red;" size="small"
                                            @click="handleDialogDelete(scope.row)">删除</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="el-icon-circle-plus-outline"
                            style=" width: 100%;height: 30px;color: darkturquoise; background-color:#f8f8f8; text-align: center;padding-top: 15px;">
                            添加附件</div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">取 消</el-button>
                <el-button type="primary" @click="submitFrom('FireFightingForm')" class="btn_primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            pageTitle:'隐患整改',
            switchData: false,
            // 遮罩层
            loading: false,
            //分页
            total: 10,
            title: '查看风险计划',
            dialogVisible: false,
            //搜索选项
            searchMap: {
                pageNum: 1,
                pageSize: 10,
            },
            dataList: [
                {
                    content: "内容内容内容内容内容内容内容内容内容内容内容内容内容",
                    tree: '公司级',
                    unit: '龙岩烟草公司烟草公司烟草公司',
                    per: '黄蓉'
                }
            ],
            // 提交表单数据
            formModel: {
                deviceClassifyId: null,
            },
            // 表单配置项
            formItemConfig: [
                {
                    label: "单位名称",
                    prop: "deviceClassifyId",
                    span: 24,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "隐患整改名称",
                    prop: "deviceClassifyId",
                    span: 24,
                    component: 'BaseSelect',
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "治理名称或年度",
                    prop: "deviceClassifyId",
                    span: 24,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "问题详情",
                    prop: "deviceClassifyId",
                    span: 24,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "问题条数",
                    prop: "deviceClassifyId",
                    span: 12,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "重大安全隐患条数",
                    prop: "deviceClassifyId",
                    span: 12,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "整改完成情况",
                    prop: "deviceClassifyId",
                    span: 12,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "整改完成状态",
                    prop: "deviceClassifyId",
                    span: 12,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                {
                    label: "完成时间",
                    prop: "deviceClassifyId",
                    span: 12,
                    filedLabel: "deviceTypeName",
                    filedValue: "deviceTypeId",
                    labelWidth: "160px",
                    clearable: true,
                },
                // {
                //     label: "是否有重大安全隐患",
                //     prop: "deviceClassifyId",
                //     span: 12,
                //     filedLabel: "deviceTypeName",
                //     filedValue: "deviceTypeId",
                //     labelWidth: "160px",
                //     clearable: true,
                // },
                // {
                //     label: "是否销号",
                //     prop: "deviceClassifyId",
                //     span: 12,
                //     filedLabel: "deviceTypeName",
                //     filedValue: "deviceTypeId",
                //     labelWidth: "160px",
                //     clearable: true,
                // },
            ],
            // 表单验证
            formRules: {
                deviceClassifyId: {
                    required: true,
                    message: "设备分类不能为空",
                    trigger: "change",
                },
            },
            fileList: [
                { label: '文件1', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
            ],
        }
    },
    methods: {
        //提交
        submitFrom() { },
        //删除
        handleDelete(row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 查询
        handleSearch() {
            this.getList()
        },
        // 重置
        handleReset() {
            this.searchMap = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        //弹框文件操作，有效
        handleDialogGet() { },
        //弹框文件操作，下载
        handleDialogDownload() { },
        //弹框文件操作，删除
        handleDialogDelete() { },
        //新增打开
        handleAdd() {
            this.title = "新增管控措施"
            this.dialogVisible = true;
        },
        //编辑
        handleEdit(row) {
            this.title = "编辑管控措施"
            this.dialogVisible = true;
        },
        //查看
        handleSelect(row) {
            this.title = "管控措施详情"
            this.dialogVisible = true;
        },
        // 页面数据
        getList() { },
    }
}
</script>
<style lang="less" scoped></style>